<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--部门数据 -->
      <el-form ref="queryForm" :inline="true" :model="filters" label-width="auto">
        <el-row>
          <el-col :span="10" class="formHeight">
            <el-form-item label="用户名称" prop="userName" placeholder="用户名称">
              <el-input
                v-model="filters.userName"
                size="small"
                placeholder="请输入用户名称"
                clearable
                style="width: 213px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10" class="formHeight">
            <el-form-item label="部门名称" prop="deptId">
              <treeselect
                v-model="filters.deptId"
                :options="deptOptions"
                :searchable="true"
                :normalizer="normalizer"
                placeholder="请选择部门"
                no-options-text="暂无数据"
                clear-value-text=""
                style="width: 213px"
                :disable-branch-nodes="true"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" class=" border">
        <el-col :span="1.5">
          <el-button icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button icon="el-icon-refresh" size="mini" @click="btnReset">重置</el-button>
        </el-col>
      </el-row>
      <!-- 表格展示start -->
      <el-table
        ref="multipleTable"
        v-loading="tableLoading"
        :data="sysUserData"
        class="table"
        tooltip-effect="dark"
        :row-key="getRowKey"
        style="width: 100%"
        size="mini"
        max-height="350"
        @selection-change="handleSelectionChange"
        @row-click="rowChecked"
      >
        <el-table-column type="selection" :reserve-selection="true" width="38" align="center" />
        <el-table-column
          prop="loginName"
          label="登录账号"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          prop="userName"
          label="用户名称"
          align="center"
          min-width="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="dept.deptName" label="部门" align="center" min-width="150" :show-overflow-tooltip="true" />
        <el-table-column prop="status" label="状态" align="center" :formatter="statusFormat" :show-overflow-tooltip="true" />
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="150" :show-overflow-tooltip="true" />
      </el-table>
      <!-- 表格展示end-->
      <!-- 分页-->
      <pagination
        :total="total"
        :page.sync="filters.pageNum"
        :limit.sync="filters.pageSize"
        :page-count="filters.pageCount"
        :page-sizes="[8,15,20,50,100]"
        @pagination="getList"
      />
    </el-row>
  </div>
</template>

<script>
import {
  selectAllCompanyUserNoManagerList
} from '@/api/system/user'
import { selectAllCompanyDeptTree } from '@/api/system/dept'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  // 接受父组件传过来的值
  props: {
    dataScopListDelList: {
      type: Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return []
      }
    },
    userList: {
      type: Array,
      // 当为数组类型设置默认值时必须使用数组返回
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tooltipContent: '隐藏',
      // 左侧树状图状态
      out: true,
      sysUserData: [],
      // 部门名称
      deptName: undefined,
      // 部门树选项
      // 部门树数组
      deptOptions: [],
      normalizer(node) {
        // 去掉children=[]的children属性
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.deptId,
          label: node.deptName,
          children: node.children
        }
      },
      tableLoading: false,
      // 选中表格对话框的存储的值
      multipleSelection: [],
      // 状态数据字典
      statusOptions: [],
      // 查询参数
      filters: {
        pageNum: 1,
        pageSize: 8,
        pageCount: 5,
        deptId: null,
        userName: '',
        phonenumber: '',
        status: ''
      },
      // 分页总条数
      total: 0
    }
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted: function() {
    this.loadUserDate()
    this.selectDeptTree()
    this.getDicts('sys_normal_disable').then(response => {
      this.statusOptions = response.data.rows
    })
  },
  methods: {
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status)
    },
    // 隐藏菜单树
    hideBodyTree() {
      this.out = false
      setTimeout(() => {
        this.tooltipContent = '显示'
      }, 500)
    },
    // 显示菜单树
    showBodyTree() {
      this.out = true
      setTimeout(() => {
        this.tooltipContent = '隐藏'
      }, 500)
    },
    // 单击每行时每行的复选框选中
    rowChecked(row) {
      this.$refs.multipleTable.toggleRowSelection(row)
    },
    // 分页选中返回数据
    getRowKey(row) {
      return row.userId
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.filters.deptId = data.id
      this.btnSearch()
    },
    // 点击表格前面选框时触发的事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.checkIds(val)
    },
    // 获取选中的行数并且把值返回到父节点（roleDataScopeDet）
    checkIds(val) {
      var ids = ''
      for (var i = 0; i < val.length; i++) {
        ids += val[i].userId + ','
      }
      this.$emit('multipleSelection', ids, this.multipleSelection)
    },
    getList() {
      this.loadUserDate()
    },

    loadUserDate: function() {
      var _this = this
      selectAllCompanyUserNoManagerList(this.filters).then(resp => {
        if (resp) {
          _this.sysUserData = resp.data.rows
          _this.total = resp.data.total
          // 回显选中的行数
          this.echo()
        } else {
          this.msgError(resp.message)
        }
      })
    },
    // 搜索方法
    btnSearch() {
      this.loadUserDate()
    },
    // 清空搜索信息
    resetForm() {
      this.filters = {
        userName: '',
        phonenumber: '',
        status: '',
        dateRange: '',
        deptId: null
      }
    },
    // 重置
    btnReset() {
      this.resetForm()
      this.loadUserDate()
    },
    // 部门选择树列表
    selectDeptTree() {
      var _this = this
      selectAllCompanyDeptTree().then(resp => {
        if (resp) {
          _this.deptOptions = resp.data
        }
      })
    },

    /** 弹框选中行数调用的方法 */
    // 清空勾选的行
    emptmultipleSelection() {
      this.$refs.multipleTable.clearSelection()
    },
    // 回显数据
    echo: function() {
      // 获取父组件中 封装自定义行和列的信息（dataScopListDelList）
      var dataScopListDelList = this.dataScopListDelList
      var userList = this.userList
      // 遍历数组获取封装行对象的数组
      if (dataScopListDelList != null && dataScopListDelList.length > 0) {
        var dataObjRowList = {}
        for (var i = 0; i < dataScopListDelList.length; i++) {
          if (dataScopListDelList[i].dataObjRecordType === 'row') {
            dataObjRowList = dataScopListDelList[i].dataObjRowList
          }
        }
        // 回显选中了那些行
        dataObjRowList.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else if (userList != null && userList.length > 0) {
        userList.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .headRowClass{
    transition-duration: 300ms
  }
  .dialogStyleMiddle .el-dialog .el-select{
    width: 100px;
  }
</style>
